<template>
  <div class="page__header">
    <div class="actions__item">
      <span>项目</span>
      <el-select size="small" style="width: 150px;" v-model="queryParams.app_id" @change="proChange">
        <el-option v-for="item in permission_projectList" :value="item.app_id" :label="item.name"
          :key="item.app_id"></el-option>
      </el-select>
    </div>
    <div class="actions__item">
      <span>版本</span>
      <version-select ref="versionSelect" :selOptions="versionOpts" isIntVer v-model="queryParams.version"
        style="min-width: 200px" size="mini" @change="searchChange">
      </version-select>
    </div>
    <div class="actions__item">
      <span>渠道</span>
      <select-check-box @change="searchChange" v-model="queryParams.union_id" style="min-width: 120px" filterable
        :selOptions="channelOpts || []" :props="{ value: 'channel_id', label: 'name' }" doubleColumn
        checkAllLabel="全部渠道" size="mini">
      </select-check-box>
    </div>
    <div class="actions__item">
      <span>时间</span>
      <el-date-picker v-model="queryParams.date" type="daterange" style="width: 250px" range-separator="至" start-placeholder="开始日期"
      size="mini" end-placeholder="结束日期" @change="searchChange" value-format="yyyy-MM-dd"
      :picker-options="pickerOptions">
    </el-date-picker>
    </div>
    <div class="actions__item">
      <span>事件ID或者名称</span>
      <el-select v-model="queryParams.button_id" filterable  placeholder="全部事件" style="width: 120px;" @change="searchChange">
          <el-option v-for="item in eventList" :key="item.button_id" :label="`${item.button_id} - ${item.button_name}`" :value="item.button_id"></el-option>
         </el-select>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getVersionTree } from '@/api'
import { getChannelByAppId } from '@/api/system/channel'
import { parseTime } from '@/utils/index'

const LIST_MODE = [
  { label: '树形无序', value: 1 },
  { label: '线型升序', value: 0 }
]
export default {
  props: {
    showManagerLoading: { type: Boolean, default: false },
    eventList: { type: Array, default: () => [] }
  },
  data: () => {
    return {
      LIST_MODE,
      versionOpts: [],
      channelOpts: [],
      channelList: [],
      queryParams: {
        app_id: '',
        time: parseTime(Date.now() - 3600 * 24 * 1000, '{y}-{m}-{d}'),
        union_id: [],
        version: [],
        mode: LIST_MODE[1].value,
        date: [],
        button_id: 0
      },
      pickerOptions: {
        shortcuts: [{
          text: '过去3日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(Date.now() - 3600 * 1000 * 24 * 1)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去8日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(Date.now() - 3600 * 1000 * 24 * 1)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 8)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去15日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(Date.now() - 3600 * 1000 * 24 * 1)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '过去30日',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(Date.now() - 3600 * 1000 * 24 * 1)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  methods: {
    setQueryParams (params, change) {
      this.queryParams = { ...this.queryParams, ...params }
      if (change) {
        this.searchChange()
      }
    },
    disabledDate (time) {
      const now = new Date()
      now.setHours(0, 0, 0, 0)
      return time.getTime() >= now.getTime()
    },
    async getVerLists (app_id) {
      getVersionTree({ app_id, is_test: false })
        .then(res => {
          let list = res.data || []
          this.versionOpts = list
          this.$emit('version-change', this.versionOpts)
          this.$emit('channel-change', this.channelOpts)
        })
    },
    getChannels () {
      const list = this.permission_projectList.map(item => item.app_id)
      return getChannelByAppId({
        app_ids: list.join()
      }).then(res => {
        this.channelList = res.data.list.map(item => {
          item.name = `${item.name}(${item.channel_id})`
          return item
        })
        this.channelOpts = this.channelList.filter(item1 => item1.app_id === this.queryParams.app_id)
      })
    },
    async proChange (val) {
      this.channelOpts = this.channelList.filter(item1 => item1.app_id === this.queryParams.app_id)
      await this.getVerLists(val)
      this.queryParams.union_id = []
      this.queryParams.attr_id = []
      this.queryParams.version = []
      this.queryParams.button_id = ''
      this.$emit('pro-change', this.parseQueryparams())
    },
    modeChange () {
      this.searchChange()
    },
    parseQueryparams () {
      const params = {
        appid: this.queryParams.app_id,
        version: this.queryParams.version.join(','),
        unionid: this.queryParams.union_id.join(','),
        date: this.queryParams.date,
        mode: this.queryParams.mode

      }
      if (this.queryParams.button_id) {
        params.button_id = parseInt(this.queryParams.button_id)
      }
      return params
    },
    searchChange () {
      this.$emit('change', this.parseQueryparams())
    },
    initReportDetail () {
      const { button_id, title, appid, unionid, version, date } = this.$route.query
      // this.open(button_id, title, { appid, union_id, version, date })
      this.queryParams.button_id = parseInt(button_id) || 0
      this.queryParams.title = title
      this.queryParams.app_id = parseInt(appid)
      this.queryParams.union_id = unionid ? unionid.split(',') : []
      this.queryParams.version = (version ? version.split(',') : []).map(item => parseInt(item))
      const date_end = date
      const date_begin = date
      this.queryParams.date = [date_begin, date_end]
      this.getVerLists(appid)
      this.getChannels()
      this.searchChange()
    }
  },
  mounted () {
    this.initReportDetail()
  }
}
</script>

<style lang="scss" scoped>
.page__header {
  /deep/ .el-tag--info {
    display: flex;
    align-items: center;

  }

  /deep/ .el-select__tags-text {
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.page__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;;
  margin-bottom: 20px;
  /deep/ .el-tag--info {
    display: flex;
    align-items: center;

  }
  /deep/ .el-select__tags-text {
    max-width: 80px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.actions__item {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
